<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Caprice</title>
<link rel="shortcut icon" type="image/x-icon" href="style/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" media="screen" href="style/css/prettyPhoto.css"  />
<link href='http://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/css/ie7.css" media="all" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/css/ie8.css" media="all" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="style/css/ie9.css" media="all" />
<![endif]-->
<script type="text/javascript" src="style/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="style/js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="style/js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="style/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="style/js/carousel.js"></script>
<script type="text/javascript" src="style/js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="style/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
	<!-- Begin Sidebar -->
	<div id="sidebar">
		 <div id="logo"><a href="index.html"><img src="style/images/logo.png" alt="Caprice" /></a></div>
		 
	<!-- Begin Menu -->
    <div id="menu" class="menu-v">
      <ul>
        <li><a href="index.html" class="active">Home</a>
        	<ul>
        		<li><a href="index.html">Home w/ Carousel</a></li>
        		<li><a href="index2.html">Home w/ Portfolio</a></li>
        		<li><a href="index3.html">Home w/ Testimonials</a></li>
        	</ul>
        </li>
        <li><a href="portfolio.html">Portfolio</a>
        	<ul>
        		<li><a href="portfolio.html">Portfolio 4 Columns</a></li>
        		<li><a href="portfolio2.html">Portfolio 3 Columns</a></li>
        		<li><a href="portfolio3.html">Portfolio 2 Columns</a></li>
        		<li><a href="portfolio4.html">Portfolio 1 Column</a></li>
        		<li><a href="portfolio-post.html">Portfolio Post</a></li>
        	</ul>
        </li>
        <li><a href="blog.html">Blog</a>
        	<ul>
        		<li><a href="blog.html">Blog</a></li>
        		<li><a href="blog2.html">Blog w/ Sidebar</a></li>
        		<li><a href="post.html">Post</a></li>
        		<li><a href="post2.html">Post w/ Sidebar</a></li>
        	</ul>
        </li>
        <li><a href="buttons-boxes-images.html">Features</a>
        	<ul>
        		<li><a href="buttons-boxes-images.html">Buttons Boxes Images</a></li>
        		<li><a href="tabs-toggle-table.html">Tabs Toggle Tables</a></li>
        		<li><a href="testimonials.html">Testimonials</a></li>
        		<li><a href="typography.html">Typography</a></li>
        		<li><a href="service-icons.html">Service Icons</a></li>
        	</ul>
        </li>
        <li><a href="contact.html">Contact Us</a></li>
      </ul>
    </div>
    <!-- End Menu -->
   
    
    <div class="sidebox">
    <ul class="share">
    	<li><a href="#"><img src="style/images/icon-rss.png" alt="RSS" /></a></li>
    	<li><a href="#"><img src="style/images/icon-facebook.png" alt="Facebook" /></a></li>
    	<li><a href="#"><img src="style/images/icon-twitter.png" alt="Twitter" /></a></li>
    	<li><a href="#"><img src="style/images/icon-dribbble.png" alt="Dribbble" /></a></li>
    	<li><a href="#"><img src="style/images/icon-linkedin.png" alt="LinkedIn" /></a></li>
    </ul>
    </div>

    
	</div>
	<!-- End Sidebar -->
	
	<!-- Begin Content -->
	<div id="content">
	<h1 class="title">Buttons, Boxes and Images</h1>
	<div class="line"></div>
	<div class="intro">Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</div>
	
	
   	<h3>Buttons</h3>
      <p>You can use any color in buttons. Here are some examples:</p>
      <a href="#" class="button">Button</a> <a href="#" class="button blue">Blue Button</a> <a href="#" class="button brown">Brown Button</a> <a href="#" class="button green">Green Button</a> <a href="#" class="button purple">Purple Button</a> <a href="#" class="button red">Red Button</a>
      <div class="line"></div>
      <h3>Boxes</h3>
      <div class="one-half">
        <div class="info-box">This is an information box</div>
      </div>
      <div class="one-half last">
        <div class="download-box">This is a download box</div>
      </div>
      <div class="one-half">
        <div class="warning-box">This is a warning box</div>
      </div>
      <div class="one-half last">
        <div class="note-box">This is a note box</div>
      </div>
      <div class="clear"></div>
      
      <br />
      
      <div class="line"></div>
      <h3>Images</h3>
      <p><a href="style/images/art/p5-full.jpg" rel="prettyPhoto[images]" title="this is title"><img src="style/images/art/p5.jpg" alt="" class="left round"/></a> Duis non lectus sit amet est imperdiet cursus elementum vitae eros. <span class="highlight">Etiam adipiscing</span> morbi vitae magna tellus, ac mattis urna. <span class="highlight2">Phasellus rhoncus tincidunt</span> posuere. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper. Nulla facilisi. Donec interdum, enim in dignissim lacinia, lectus nisl viverra lorem, ac pulvinar nunc ante at neque. Proin et dui eros, at aliquet est. Pellentesque consectetur lectus quis enim mollis ut convallis urna malesuada. Sed tincidunt interdum sapien vel gravida. Nulla a tellus lectus, in aliquet tellus. Donec aliquam neque quis mi vestibulum ut cursus velit consectetur.  Mauris convallis, sapien id ultricies aliquet, mi nisi congue dui, id laoreet ligula ante vitae ligula. Duis lectus magna, cursus in molestie eget, cursus eget quam.</p>
      <p><a href="style/images/art/p6-full.jpg" rel="prettyPhoto[images]" title="this is title"><img src="style/images/art/p6.jpg" alt="" class="right round" /></a>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris convallis, sapien id ultricies aliquet, mi nisi congue dui, id laoreet ligula ante vitae ligula. Duis lectus magna, cursus in molestie eget, cursus eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Nunc in turpis metus. Sed sit amet dictum magna.  Aliquam vel mauris ut quam sodales ultricies nec sed dolor. Duis sed ipsum at tellus sodales ultrices. Proin sit amet ligula non mauris lacinia malesuada. Nam nisl felis, tincidunt sit amet pharetra at, lacinia ut turpis. Ut fermentum nisl vel arcu blandit cursus. Vivamus eget nibh dolor, in viverra leo. Fusce tincidunt metus in dui accumsan tempor. In sit amet viverra magna. Phasellus facilisis porta dolor ut sagittis. Morbi ullamcorper laoreet metus, eu commodo diam cursus et. Nam eleifend aliquam augue, id condimentum erat vehicula vel. </p>
      <p><a href="style/images/art/p7-full.jpg" rel="prettyPhoto[images]" title="this is title"><img src="style/images/art/p7.jpg" alt="" class="center round" /></a>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
    
    <!-- Begin Footer -->
    <div id="footer">
  	<div class="footer-box one-third">
  	<h3>Popular Posts</h3>
			<ul class="popular-posts">
				<li>
					<a href="#"><img src="style/images/art/s1.jpg" alt="" /></a>
					<h5><a href="#">Dolor Commodo Consectetur</a></h5>
					<span>26 Aug 2013 | <a href="#">21 Comments</a></span>
				</li>
				
				<li>
					<a href="#"><img src="style/images/art/s2.jpg" alt="" /></a>
					<h5><a href="#">Dolor Commodo Consectetur</a></h5>
					<span>26 Aug 2013 | <a href="#">21 Comments</a></span>
				</li>
				
				<li>
					<a href="#"><img src="style/images/art/s3.jpg" alt="" /></a>
					<h5><a href="#">Dolor Commodo Consectetur</a></h5>
					<span>26 Aug 2013 | <a href="#">21 Comments</a></span>
				</li>

			</ul>
  	</div>
  	<div class="footer-box one-third">
  	<h3>About</h3>
  	<p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla.</p> 
  	<p>Lorem Ipsum Dolor Sit
          Moon Avenue No:11/21
          Planet City, Earth<br>
          <br>
          <span class="lite1">Fax:</span> +555 797 534 01<br>
          <span class="lite1">Tel:</span> +555 636 646 62<br>
          <span class="lite1">E-mail:</span> name@domain.com</p>
          
          
  	</div>
  	
  	<div class="footer-box one-third last">
  	<h3>Custom Text</h3>
  	<p>Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit. </p>
  	<p>Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor.</p>
  	</div>
    </div>
    <!-- End Footer -->
    
    
	</div>
	<!-- End Content -->
	
</div>
<!-- End Wrapper -->
<div class="clear"></div>
<script type="text/javascript" src="style/js/scripts.js"></script>
<!--[if !IE]> -->
<script type="text/javascript" src="style/js/jquery.corner.js"></script>
<!-- <![endif]-->
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>